<script>
    export default {
        data() {
            return {
				iconList:[
						{
							icon:'../../static/search/歌手.png',
							name:'歌手'
						},
						{
							icon:'../../static/search/曲库.png',
							name:'曲风'
						},
						{
							icon:'../../static/search/音乐.png',
							name:'专区'
						},
						{
							icon:'../../static/search/麦克风.png',
							name:'识曲'
						}	
					],
                searchHistory:[],
				guessLike:["橘子","Uh-Oh","你要的全拿走","123"],
				searchHot:[],
				searchRank:[],
				input:""
			}
        },
        methods: {
			getSearchHot(){
				uni.request({
					url: 'http://localhost:3008/searchHot',
					method: 'GET',
					data: {},
					success: res => {
						this.searchHot=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
            getSearchRank(){
            	uni.request({
            		url: 'http://localhost:3008/searchRank',
            		method: 'GET',
            		data: {},
            		success: res => {
            			this.searchRank=res.data
            		},
            		fail: () => {},
            		complete: () => {}
            	});
            },
			goBack(){
				uni.navigateBack()
			},
			handleAdd(e){
				if(this.input.trim()==='')
				return
				// this.searchHistory.unshift(e)
				this.input=''
				uni.setStorage({
					key: e,
					data: e,
				});
				const value = uni.getStorageSync(e)
				this.searchHistory.unshift(value)
			},
			handleClear(){
				this.searchHistory=''
			},
			handleRefresh(){
				let data=this.guessLike
				this.guessLike=data
			}
        },
		created() {
			this.getSearchHot()
			this.getSearchRank()
		},
	
		mounted(){
			
		}
    }
</script>
<template>
    <view class="container">
        <view class="search">
            <img src="../../static/search/上一级.png" @click="goBack">
            <view class="sub-search">
                <img src="../../static/搜索.png" >
                <input type="text" placeholder="请输入你要搜索的内容" ref="ipt" v-model="input"  @confirm="handleAdd(input)" auto-focus="true">
            </view>
            <span @click="handleAdd(input)">搜索</span>
        </view>
        <view class="type">
            <view class="kind" v-for="item in iconList">
                <img :src="item.icon" >
                <span>{{item.name}}</span>
            </view>
        </view>
        <view class="title">
            <span>搜索历史</span>
            <img src="../../static/search/垃圾桶.png" @click="handleClear">
        </view>
        <view class="search-history">
            <ul>
                <li v-for="item in searchHistory"><span>{{item}}</span></li>
            </ul>
        </view>
        <view class="title">
            <span>猜你喜欢</span>
            <img src="../../static/search/刷新.png" >
        </view>
        <view class="search-history">
            <ul>
                <li v-for="item in guessLike"><span>{{item}}</span></li>
            </ul>
        </view>
        
        <view class="out-container">
			<view class="searchList">
				<view class="search-title">
					<span>热搜榜</span>
				</view>
			    <view class="search-content">
			        <ul>
			        	<li v-for="(item,index) in searchHot" key="index">
							<span style="margin-right: 20px;" :class="{active:index<3}">{{index+1}}</span>
							<span>{{item.name}}</span>
						</li>
			        </ul>
			    </view>
			</view>
			<view class="searchList">
				<view class="search-title">
					<span>听书榜</span>
				</view>
			    <view class="search-content">
			       <ul>
			       	<li v-for="(item,index) in searchRank" key="index">
			       		<span  style="margin-right: 20px;" :class="{active:index<3}">{{index+1}}</span>
			       		<span>{{item.name}}</span>
			       	</li>
			       </ul>
			    </view>
			</view>
		</view>
		<bottomBar style="bottom: 0px;"></bottomBar>
    </view>
</template>



<style scoped>
	.active{
		color: red;
	}
.container{
    background-color:#1b1b23;
    margin: 0 auto;
    color: #eaebf0;
}    
.search{
    display: flex;
    justify-content: space-between;
    width:90%;
    height:40px;
    line-height: 40px;
    margin:0 auto;
	margin-bottom: 20px;
}
.search img{
    width: 30px;
    height: 30px;
    margin-top: 5px;
}
.sub-search{
    width: 76%;
    background-color: #32323a;
    border-radius: 20px;
    display: flex;
}
.sub-search :nth-child(1){
    margin-left: 10px;
}
.sub-search :nth-child(2){
    height: 100%;
    width:200px;
    margin-left: 5px;
}
.type{
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    height:30px;

}
.type img{
    width:20px;
    height: 20px;
	margin-top: 5px;
	margin-right: 6px;
}
.kind{
    height: 30px;
    display: flex;
    line-height: 30px;
}
.title{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 800;
    height: 30px;
    line-height: 30px;
    margin:5px 10px;
}
.title img{
    width: 20px;
    height: 20px;
    margin-top: 5px;
}
.search-history ul{
    padding-left: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:start;
	list-style: none;
}
.search-history{
    margin: 10px;
}
.search-history li{
    background-color:  #32323a;
    border-radius: 20px;
    margin:3px 8px;
}
.search-history span{
    margin: 5px 10px;
    font-size: 14px;
}
.out-container{
	display: flex;
	overflow: scroll;
	margin: 20px 10px 10px 10px;
	
}
.searchList{
	background-color: #313139;
	width: 260px;
	border-radius: 10px;
	margin-right:10px;
	margin-bottom: 50px;
}
.search-title{
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: left;
	margin: auto 20px;
	border-bottom: 1px solid #40404a;
}
.search-content{
	width: 200px;
	margin: 10px 20px;
}
.search-content ul{
	list-style: none;
	padding-left:0px;
	font-size: 14px;
	font-weight: 500;
}
.search-content li{
	padding: auto 10px;
	margin: 5px auto;
}


</style>
